<template>
	<view class="flash-sale">
		<view class="header">
			<view class="title">
				<text class="icon">🔥</text>
				<text>限时秒杀</text>
			</view>
			<view class="countdown">
				<view class="time-box">
					<view class="flip-card">
						<view class="flip-card-inner" :class="{ 'flip': hours !== prevHours }">
							<view class="flip-card-front">
								<text>{{ prevHours }}</text>
							</view>
							<view class="flip-card-back">
								<text>{{ hours }}</text>
							</view>
						</view>
					</view>
					<text class="separator">:</text>
					<view class="flip-card">
						<view class="flip-card-inner" :class="{ 'flip': minutes !== prevMinutes }">
							<view class="flip-card-front">
								<text>{{ prevMinutes }}</text>
							</view>
							<view class="flip-card-back">
								<text>{{ minutes }}</text>
							</view>
						</view>
					</view>
					<text class="separator">:</text>
					<view class="flip-card">
						<view class="flip-card-inner" :class="{ 'flip': seconds !== prevSeconds }">
							<view class="flip-card-front">
								<text>{{ prevSeconds }}</text>
							</view>
							<view class="flip-card-back">
								<text>{{ seconds }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<scroll-view scroll-x class="product-scroll" show-scrollbar="false">
			<view class="product-list">
				<view class="product-item" v-for="(item, index) in products" :key="index" @click="goToDetail(item)">
					<image :src="item.logo" mode="aspectFill" class="product-image"></image>
					<view class="tag" v-if="item.tag">{{ item.tag }}</view>
					<view class="product-info">
						<text class="product-name">{{ item.name }}</text>
						<view class="price-box">
							<text class="current-price">¥{{ item.price }}</text>
							<text class="original-price">¥{{ item.originalPrice }}</text>
						</view>
						<view class="progress-box">
							<view class="progress-bar">
								<view class="progress" :style="{ width: item.progress + '%' }"></view>
							</view>
							<text class="progress-text">已抢{{ item.soldCount }}/{{ item.totalCount }}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const hours = ref('00')
const minutes = ref('00')
const seconds = ref('00')
const prevHours = ref('00')
const prevMinutes = ref('00')
const prevSeconds = ref('00')
let timer = null
import {useData} from "../../../common/useData";
const {modelData:products}=useData("/product/list",{size:6})

// 秒杀商品数据
const flashSaleProducts = ref([
	{
		id: 1,
		name: '限时特惠商品1',
		image: '/static/demo/product1.jpg',
		currentPrice: '99.00',
		originalPrice: '199.00',
		progress: 75,
		soldCount: 75,
		totalCount: 100,
		tag: '热销'
	},
	{
		id: 2,
		name: '限时特惠商品2',
		image: '/static/demo/product2.jpg',
		currentPrice: '59.00',
		originalPrice: '129.00',
		progress: 45,
		soldCount: 45,
		totalCount: 100,
		tag: '新品'
	},
	{
		id: 3,
		name: '限时特惠商品3',
		image: '/static/demo/product3.jpg',
		currentPrice: '79.00',
		originalPrice: '159.00',
		progress: 90,
		soldCount: 90,
		totalCount: 100,
		tag: '即将售罄'
	},
	{
		id: 4,
		name: '限时特惠商品4',
		image: '/static/demo/product4.jpg',
		currentPrice: '89.00',
		originalPrice: '169.00',
		progress: 60,
		soldCount: 60,
		totalCount: 100,
		tag: '限购'
	}
])

// 更新倒计时
const updateCountdown = () => {
	const now = new Date()
	const end = new Date()
	end.setHours(23, 59, 59)

	const diff = end - now

	// 保存上一次的值
	prevHours.value = hours.value
	prevMinutes.value = minutes.value
	prevSeconds.value = seconds.value

	// 更新当前值
	hours.value = Math.floor(diff / (1000 * 60 * 60)).toString().padStart(2, '0')
	minutes.value = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)).toString().padStart(2, '0')
	seconds.value = Math.floor((diff % (1000 * 60)) / 1000).toString().padStart(2, '0')
}

// 跳转到商品详情
const goToDetail = (item) => {
	uni.navigateTo({
		url: `/pages/product/detail?id=${item.id}&type=flash`
	})
}

onMounted(() => {
	updateCountdown()
	timer = setInterval(updateCountdown, 1000)
})

onUnmounted(() => {
	if (timer) {
		clearInterval(timer)
	}
})
</script>

<style scoped>
.flash-sale {
	background-color: #ffffff;
	margin: 20rpx;
	border-radius: 12rpx;
	padding: 20rpx;
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
	padding: 0 10rpx;
}

.title {
	display: flex;
	align-items: center;
	font-size: 32rpx;
	font-weight: bold;
}

.icon {
	margin-right: 10rpx;
}

.countdown {
	display: flex;
	align-items: center;
}

.time-box {
	display: flex;
	align-items: center;
}

.flip-card {
	width: 50rpx;
	height: 60rpx;
	perspective: 1000rpx;
	margin: 0 4rpx;
	position: relative;
}

.flip-card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	transform-style: preserve-3d;
}

.flip-card-inner.flip {
	transform: rotateX(180deg);
}

.flip-card-front, .flip-card-back {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6rpx;
	box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.flip-card-front {
	background: linear-gradient(135deg, #333, #222);
	color: #fff;
}

.flip-card-back {
	background: linear-gradient(135deg, #ff5555, #ff3333);
	color: #fff;
	transform: rotateX(180deg);
}

.flip-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 100%);
	border-radius: 6rpx;
	z-index: 2;
}

.separator {
	color: #333;
	font-size: 28rpx;
	font-weight: bold;
	margin: 0 6rpx;
	animation: pulse 1s infinite;
}

@keyframes pulse {
	0% { opacity: 1; }
	50% { opacity: 0.5; }
	100% { opacity: 1; }
}

.product-scroll {
	width: 100%;
	white-space: nowrap;
}

.product-list {
	display: inline-flex;
	padding: 10rpx 0;
}

.product-item {
	width: 220rpx;
	margin-right: 20rpx;
	background-color: #fff;
	border-radius: 8rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	position: relative;
}

.product-image {
	width: 220rpx;
	height: 220rpx;
	border-radius: 8rpx 8rpx 0 0;
}

.product-info {
	padding: 12rpx;
}

.product-name {
	font-size: 26rpx;
	color: #333;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	white-space: normal;
	line-height: 1.4;
}

.price-box {
	margin-top: 10rpx;
	display: flex;
	align-items: baseline;
}

.current-price {
	color: #ff4444;
	font-size: 32rpx;
	font-weight: bold;
}

.original-price {
	color: #999;
	font-size: 24rpx;
	text-decoration: line-through;
	margin-left: 10rpx;
}

.progress-box {
	margin-top: 10rpx;
}

.progress-bar {
	height: 4rpx;
	background-color: #f5f5f5;
	border-radius: 2rpx;
	overflow: hidden;
}

.progress {
	height: 100%;
	background-color: #ff4444;
	transition: width 0.3s ease;
}

.progress-text {
	font-size: 22rpx;
	color: #999;
	margin-top: 6rpx;
	display: block;
}

.tag {
	position: absolute;
	top: 10rpx;
	right: 10rpx;
	background-color: rgba(255, 68, 68, 0.9);
	color: #fff;
	font-size: 22rpx;
	padding: 4rpx 12rpx;
	border-radius: 20rpx;
	z-index: 1;
}
</style>
